<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FileReader 对象</title>
    <style>
        .thum__img {
            width: 100px;
            height: 100px;
            border: 10px white solid;
        }
    </style>
</head>
<body>
    <div>
        <input type="file" id="FileBox" multiple/>
        <!-- webkitdirectory 可以上传文件夹 -->
        <!-- multiple 可以上传多个文件 -->
    </div>
    <div>
        <h3>文件信息</h3>
        <p class="fileMsg">

        </p>
    </div>
    <div>
        <h3>文件缩略图</h3>
        <p class="thumbnail">

        </p>
    </div>
    <button onclick="getFileMsg()">获取 input 对象</button>
    <button onclick="getFileData()">获取 input 数据</button>

    <a href="https://www.cnblogs.com/huancheng/p/9376730.html">资料参考网址1</a>
    <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader">资料参考网址2</a>

    <script>
        // input type=file 只能获取文件的描述信息
        /**
            *inputDom.files 获取文件列表信息
            *file.name 文件名
            *file.size 文件大小
            *file.type 文件类型
            *file.lastModifiedDate 文件最后修改的时间
        */
        // inputDom.value 会获取到文件的 url
            
        function getFileMsg() {
            const input = document.getElementById('FileBox')
            let str = ''
            console.log(input.files)
            for (let item of input.files) {
                str += `文件名：${item.name} 
                    <br/>
                    文件路径：${input.value}
                    <br/>
                    文件大小：${item.size}
                    <br/>
                    文件类型：${item.type}
                    <br/>
                    最后修改时间：${item.lastModifiedDate}
                    <p></p>
                `
            }
            document.getElementsByClassName('fileMsg')[0].innerHTML = str
        }

        // 可以通过 FileReader 读取到文件中的信息
        // 是异步读取的
        // FileReader 中的方法 能够 读取 File / Blob 文件对象信息   
        function getFileData() {
            
            const fileList = document.getElementById('FileBox').files
            for (let file of fileList) {
                if (!/^image\//.test(file.type)) {
                    continue
                }
                const img = document.createElement('img')
                img.classList.add('thum__img')
                document.getElementsByClassName('thumbnail')[0].appendChild(img)

                const reader = new FileReader()

                reader.onload = (function (img) {
                    return (res) => {
                        console.log('文件读取完毕！')
                        img.src = res.target.result // res.target.result 获取文件 的 url
                        console.log(res.target.result)
                    }
                })(img)

                reader.onabort = function () {
                    console.log('文件读取被中断了！')
                }
                reader.onerror = function () {
                    console.log('文件读取发生错误了！')
                }
                reader.onprogress = function () {
                    console.log('文件正在读取中！')
                }

                reader.readAsDataURL(file) // 读取文件内容，以 base64 编码格式输出
                // reader.abort() // 中止上传，会触发 abort 的监听事件
                // reader.readAsBinaryString(file) // 返回所读取文件的原始二进制串
                // reader.readAsArrayBuffer(file) // 按字节读取文件内容，结果用ArrayBuffer对象表示
                // reader.readAsText(file)  // 返回 读取文件的 文本字符串
            }
            
        }
    </script>
</body>
</html>